import React from "react";

class Notebook extends React.Component {
  constructor(props) {
    super(props);
    this.state = { note: "", notes: ["hello", "world"] };
    //,
    // bind or =>
    //this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    //alert(this.state.note)
    this.setState({
      notes: [...this.state.notes, this.state.note],
      note: ""
    });
    e.preventDefault();
  }

  handleChange(v) {
    //alert(this.state.note)
    this.setState({
      note: v
    });
  }
  render() {
    return (
      <div className="comment-list-component">
        <h1>
          <span className="label label-primary">留言表</span>
        </h1>
        <ul className="list-group mb-3">
          {this.state.notes.map((note, index) => (
            <li key={index} className="list-group-item">
              {note}
            </li>
          ))}
        </ul>

        <form className="p-5" onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>输入留言</label>
            <input
              type="text"
              className="form-control"
              placeholder="请输入留言"
              onChange={e=>this.handleChange(e.target.value)}
              value={this.state.note}
            ></input>
            <button type="submit" className="btn btn-primary">
              提交
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default Notebook;
